<template>
    <div class="stick"
        :class="{ show: top > 80 }">
        <div class="stickBox">
            <img src="@/assets/homeImg/logo.0940ebb5.png" alt="">
            <common></common>
            <span class="right">
                <router-link to="/" class="rightItem">品牌</router-link>
                <router-link to="/" class="rightItem">专题</router-link>
            </span>
        </div>
    </div>
</template>


<script>
import common from '@/components/appHome/CommonView.vue'
import {throttle} from '@/Api/constUp'
import _ from 'lodash'
export default {
    components: { common },
    data() {
        return {
            top: 0
        }
    },
    mounted() {
        window.addEventListener('scroll', _.throttle(this.setup,200))
    },
    methods:{
        setup(){
            this.top = document.documentElement.scrollTop
            // console.log(document.documentElement.scrollTop);
        }
    },
    beforeDestroy(){
        window.removeEventListener('scroll', throttle(this.setup))
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/variables.scss';

.stick {
    width: 100%;
    height: 80px;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;

    .stickBox {
        width: 1240px;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .right {
            width: 187px;
            height: 27px;
            display: flex;
            justify-content: space-around;
            border-left: 1px solid $xtxColor;

            .rightItem {
                text-decoration: none;
                color: black;
            }

            .rightItem:hover {
                color: $xtxColor;
            }

        }
    }

    img {
        height: 100%;
    }
}

.stick {
    transform: translateY(-100%);
    opacity: 0;
}

.show {
    transition: all .3s linear;
    transform: none;
    opacity: 1;
}
</style>



